<template>
    <div class="box-left-21" id="xcf21" style="width: 560px;height:250px;"></div>
</template>

<script setup>

import * as echarts from 'echarts';

import {ref,onMounted} from 'vue'


onMounted(()=>{
  var chartDom = document.getElementById('xcf21')
    var myChart = echarts.init(chartDom);
    var option;

    const colors = ['#5470C6', '#91CC75', '#EE6666'];
    option = {
        color: colors,
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        grid: {
            right: '20%'
        },
        legend: {
            data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
            {
                type: 'category',
                axisTick: {
                    alignWithLabel: true
                },
                // prettier-ignore
                data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '出库',
                position: 'left',
                alignTicks: true,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: colors[0]
                    }
                }
            },
            {
                type: 'value',
                name: '入库',
                position: 'right',
                alignTicks: true,
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: colors[1]
                    }
                }
            }
        ],
        series: [
            {
                name: 'Evaporation',
                type: 'bar',
                data: [
                    22, 25, 38, 46, 57, 76.7, 135.6, 162.2, 98.6, 54.0, 24.4, 9.3
                ]
            },
            {
                name: 'Precipitation',
                type: 'bar',
                yAxisIndex: 1,
                data: [
                    23, 25.9, 39.0, 56.4, 78.7, 70.7, 175.6, 182.2, 88.7, 58.8, 26.0, 12.3
                ]
            }
        ]
    };

    option && myChart.setOption(option);

})
</script>

<style scoped lang="scss">
.box-left-21 {
    width: 48%;
    background-color: #fff;
}
</style>